<script setup lang="ts">
import { SettingsSuggestFilled, DeleteSweepRound } from '@vicons/material'
import { NIcon } from 'naive-ui'

withDefaults(
  defineProps<{
    size?: string | number
    settingColor?: string
    deleteColor?: string
  }>(),
  {
    size: 20,
    settingColor: '#36ad6a',
    deleteColor: '#ff4d4f'
  }
)

defineEmits<{
  (event: 'setting'): void
  (event: 'delete'): void
}>()
</script>

<template>
  <ul class="dynamic-form-item-handles">
    <slot name="prefix"></slot>

    <li
      class="dynamic-form-item-handles__handle"
      @click="$emit('setting')"
    >
      <NIcon
        :size="size"
        :color="settingColor"
      >
        <SettingsSuggestFilled />
      </NIcon>
    </li>
    <li
      class="dynamic-form-item-handles__handle"
      @click="$emit('delete')"
    >
      <NIcon
        :size="size"
        :color="deleteColor"
      >
        <DeleteSweepRound />
      </NIcon>
    </li>
  </ul>
</template>

<style scoped>
.dynamic-form-item-handles {
  display: flex;
  gap: 0 5px;
  list-style: none;
}

.dynamic-form-item-handles .dynamic-form-item-handles__handle {
  cursor: pointer;
  transition: opacity 0.15s ease-in-out;
}

.dynamic-form-item-handles .dynamic-form-item-handles__handle:hover {
  opacity: 0.8;
}
</style>
